<template>
  <div class="sidebar">
    <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"
             text-color="#bfcbd9" active-text-color="#20a0ff" router @open="handleOpen">
      <template v-for="item in items">
        <template v-if="item.children">
          <el-submenu :index="item.router" :key="item.router">
            <template slot="title">
              <i :class="item.icon"></i><span slot="title">{{ item.resourceName }}</span>
            </template>
            <template v-for="subItem in item.children">
              <el-submenu v-if="subItem.children" :index="subItem.router" :key="subItem.router">
                <template slot="title">{{ subItem.resourceName }}</template>
                <el-menu-item v-for="threeItem in subItem.children" :key="threeItem.router" :index="threeItem.router">
                  {{ threeItem.resourceName }}
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.router" :key="subItem.router">
                {{ subItem.resourceName }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.router" :key="item.router">
            <i :class="item.icon"></i><span slot="title">{{ item.resourceName }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  import bus from '../common/bus';
  export default {
    data() {
      return {
        topChildrenList:['homePage'], //置顶子列表
        collapse: false,
        items: []
      }
    },
    computed:{
      onRoutes () {
        return this.$route.path.replace('/', '/')
      }
    },
    created(){
      this.getData();
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        this.collapse = msg;
      })
    },
    methods: {
      handleOpen (key, keyPath) {
      },
      getData() {
        let resources = JSON.parse(sessionStorage.getItem('resources'));
        this.items = resources
      },
      compare(property) {
        return function (a, b) {
          let value1 = a[property];
          let value2 = b[property];
          return value1 - value2;
        }
      }
    }

  }
</script>

<style scoped>
  .sidebar{
    display: block;
    position: absolute;
    left: 0;
    top: 70px;
    bottom:0;
    overflow-y: scroll;
  }
  .sidebar::-webkit-scrollbar{
    width: 0;
  }
  .sidebar-el-menu:not(.el-menu--collapse){
    width: 250px;
  }
  .sidebar > ul {
    height:100%;
  }
</style>
